<template>
	<view class="container">
		<view class="content">
			<view class="box">
				<view class="h4">
					基础信息(一)
				</view>
				<view class="title">
					<text>*</text>商品名称
				</view>
				<uni-easyinput class="uni-mt-5" trim="all" v-model="data.form.name" placeholder="请输入内容"  :disabled="data.statetype"></uni-easyinput>
				<view class="title">
					<text>*</text>商品分区
				</view>
				<uni-data-picker placeholder="请选择商品分区" popup-title="请选择商品分区" :localdata="data.partition" v-model="data.form.partition_id">
				</uni-data-picker>
				<view class="title">
					<text>*</text>商品分类
				</view>
				<uni-data-picker placeholder="请选择一级分类" popup-title="请选择选择一级分类" :localdata="data.firstlist" @change="firstchange" v-model="data.form.class_first_id"></uni-data-picker>
				<uni-data-picker style="margin: 20upx 0;" v-if="data.form.class_first_id"  @change="secondchange" placeholder="请选择二级分类" popup-title="请选择选择二级分类" :localdata="data.secondlist" v-model="data.form.class_second_id"></uni-data-picker>
<!--				<uni-data-picker v-if="data.form.class_second_id" placeholder="请选择三级分类" popup-title="请选择选择三级分类" :localdata="data.thirdlist" v-model="data.form.class_third_id"></uni-data-picker>-->
				<view class="ms">
					选择一级后出现二级,依次(一级必填，二级非必填)
				</view>
				<view class="title">
					<text>*</text>商家分类
				</view>
				<uni-data-picker placeholder="请选择商家分类" popup-title="请选择商家分类" :localdata="data.Business" v-model="data.form.business_class_id">
				</uni-data-picker>
				<view class="title">
					<text>*</text>展示图
				</view>
				<view class="uplode">
					<image v-if="data.form.img" :src="data.form.img"></image>
					<image v-else src="https://img.fubaozx.cn/static/oldImg/16994998116476.png" mode=""  @click="$Uplode(Uplodeimg)"></image>
					<text class="btn" @click="$Uplode(Uplodeimg)">
						{{data.form.img?'重新上传':'上传图片'}}
					</text>
				</view>
				<view class="title">
					<text></text>商品视频
				</view>
				<view class="uplode">
          <view class=" video video_cnt" v-if="data.form.video">

<!--#ifdef H5-->
					<video  :src="data.form.video" controls></video>
<!--#endif-->

<!--#ifdef APP-PLUS-->
          <videoImg style="	width: 260upx;
						height: 160upx;"  :src="data.form.video" ></videoImg>
<!-- #endif-->
            <uni-icons class="close" size="25" color="#f40" type="close" @click="data.form.video=''"></uni-icons>

          </view>

					<image class="video"  v-if="!data.form.video"  src="https://img.fubaozx.cn/static/oldImg/16994998373487.png" mode="" @click="$UplodeVideo(UplodeVideo)"></image>
					<view class="btn" @click="$UplodeVideo(UplodeVideo)">
						{{data.form.video?'重新上传':'上传视频'}}
					</view>
				</view>
				<view class="title">
					<text>*</text>商品轮播
				</view>
				<view class="uplodes">
					<view class="item" v-for="(item,index) in data.form.img_list" v-if="data.form.img_list.length<9">
						<image :src="item" mode="aspectFill"></image>
						<view class="delete" @click="imglistdelete(index)"></view>
					</view>
					<view class="item" @click="imglistupload">
						<image src="https://img.fubaozx.cn/static/oldImg/16994998661406.png" mode=""></image>
					</view>
				</view>
				<view class="title">
					<text></text>资质
				</view>
				<view class="uplode">
					<image v-if="data.form.material" :src="data.form.material"></image>
					<image v-else src="https://img.fubaozx.cn/static/oldImg/16994998949166.png" mode=""></image>
					<text class="btn" @click="$Uplode(Uplodematerial)">
						{{data.form.material?'重新上传':'上传图片'}}
					</text>
				</view>
			</view>
			<view class="box">
				<view class="h4">
					基础信息(二)
				</view>
				<view class="title">
					<text>*</text>商品价格
				</view>
				<uni-easyinput class="uni-mt-5" trim="all" v-model="data.form.price" type="number" placeholder="请输入内容"  :disabled="data.statetype"></uni-easyinput>
<!--				<view class="title">-->
<!--					<text>*</text>市场价格-->
<!--				</view>-->
<!--				<uni-easyinput class="uni-mt-5" trim="all" v-model="data.form.market" type="number" placeholder="请输入内容"  :disabled="data.statetype"></uni-easyinput><view class="title">-->
<!--					<text>*</text>PV值-->
<!--				</view>-->
<!--				<uni-easyinput class="uni-mt-5" trim="all" v-model="data.form.pv" type="number" placeholder="请输入内容"  :disabled="data.statetype"></uni-easyinput><view class="title">-->
<!--					<text>*</text>供货价-->
<!--				</view>-->
<!--				<uni-easyinput class="uni-mt-5" trim="all" v-model="data.form.supply" type="number" placeholder="请输入内容"  :disabled="data.statetype"></uni-easyinput>-->
				<view class="title">
					<text>*</text>让利
				</view>
				<uni-easyinput class="uni-mt-5" trim="all" v-model="data.form.discount" type="number" placeholder="请输入内容"  :disabled="data.statetype"></uni-easyinput>
				<view class="title">
					<text>*</text>商品库存
				</view>
				<uni-easyinput class="uni-mt-5" trim="all" v-model="data.form.stock" type="number" placeholder="请输入内容"  :disabled="data.statetype"></uni-easyinput><view class="title">
					<text>*</text>商品描述
				</view>
				<uni-easyinput class="uni-mt-5" trim="all" v-model="data.form.title"  placeholder="请输入内容"  :disabled="data.statetype"></uni-easyinput>
			</view>
			<view class="box">
				<view class="h4">
					<text style="color: red;">*</text>商品规格
				</view>
				<view class="xz" @click="$goURl('/pages/business/specifications')">
					编辑
				</view>
			</view>
			<view class="box">
				<view class="h4">
					<text style="color: red;">*</text>商品详情
				</view>
				<view class="xz" @click="$goURl('/pages/business/editor?details='+data.form.details)">
					编辑
				</view>
			</view>
		</view>

		<view class="footers"></view>
		<view class="footer">
			<view class="left" @click="submit(0)">
				存草稿
			</view>
			<view class="right" @click="submit(1)">
				上传
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onLoad,onShow,onPullDownRefresh,onReachBottom,onUnload} from "@dcloudio/uni-app";
  import videoImg from '@/components/videoImg'
	const {proxy} = getCurrentInstance();
	const data = reactive({
		id:0,
		firstlist:[],
		secondlist:[],
		thirdlist:[],
		partition:[],
		Business:[],
		err:'123',
		select:0,
		attribute_list:[],
		type:0,
		form:{
			name:'',
			class_first_id:'',
			class_second_id:'',
			class_third_id:'',
			business_class_id:'',
			partition_id:'',
			img_list:[],
			attribute_list:[],
			stock:'',
			sales:0,
			price:'',
			coupon:0,
			market:0,
			supply:"",
			pv:0,
			img:'',
			video:'',
			sort:0,
			title:'',
			details:'',
			discount:0,
			material:''
		}
	})
	onLoad((option)=>{
		console.log(option)
		if(option.id){
			getdetail(option.id)//获取商品
			data.id=option.id
		}else{
			uni.setStorageSync('attrlist',[])
			uni.setStorageSync('attributelist',[])
			console.log('添加',uni.getStorageSync('attrlist'))
		}

		firstClass()//一级分类
		partition()//商品分区
		Business()//商家分类
	})
	onUnload(()=>{
		uni.$off('attribute') //在此生命周期里销毁地址改变事件的监听
	})
	onShow(()=>{
		if(data.id==0){
			data.attribute_list=uni.getStorageSync('attributelist')?uni.getStorageSync('attributelist'):[]//规格
			uni.$on('editor', (info) => { //开启监听全局的地址改变事件
				data.form.details = info//商品详情
				uni.$off('editor');
			})
		}

	})
	onPullDownRefresh(()=> {
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		})
	onReachBottom(()=>{
		console.log('onReachBottom')
	})
 function getdetail(id){//获取商品详情
		proxy.$SHOPrequest({
			url: `business/goodsDetails/`,
			method: 'post',
			data:{id:Number(id)},
			success(res) {
				console.log(res)
				data.form=res.data
				data.form.img_list=proxy.$evalPro(res.data.img_list)
				let list = arr(res.data.attribute_list)
				let lists=[]
				list.forEach((item,index)=>{
					lists.push({attrs:item.attr,attr:[],addval:true})
					item.val.forEach((items,indexs)=>{
						lists[index].attr.push({
							attr:item.attr,
							val:items,
							isvalue:false
						})
					})
				})
				data.attribute_list=res.data.attribute_list
				console.log(data.form.title)
				uni.setStorageSync('attrlist',lists)
				uni.setStorageSync('attributelist',lists)
        if(res.errno==0){
          proxy.$SHOPrequest({
            url: `business/secondClass/?page=1&size=999&class_first_id=${res.data.class_first_id}`,
            method: 'get',
            success(res) {
              data.secondlist=res.data.data.map(item=>{
                return {
                  text:item.name,
                  value:item.ID
                }
              })
            }
          })
        }
			}
		})
	}
	// 规格排列组合
	function arr(arr) {
		var list = []
		arr[0]['attr'].forEach(f => {
			console.log()
			list.push({
				attr: f.attr,
				val: [],
				id: []
			})
			// data.listckeck.push(-1)
		})
		arr.forEach(f => {
			f.attr.forEach(t => {
				for (var k = 0; k < list.length; k++) {
					if (list[k].attr == t.attr) {
						list[k].val.push(t.val)
						list[k].id.push(t.ID)
					}
				}
			})
		})
		for (var i = 0; i < list.length; i++) {
			list[i].val = [...new Set(list[i].val)]
			var s = []
			for (var k = 0; k < list[i].val.length; k++) {
				s.push(k == 0 ? 1 : 0)
			}
			// data.selectlist.push(s)
		}
		return list
	}
	function shopClassList (){
		proxy.$request({
			url: `api/shopClassList/?page=1&size=999`,
			method: 'get',
			success(res) {
			}
		})
	}
	function Business (){
		proxy.$SHOPrequest({
			url: `business/addBusinessClass/?page=1&size=999`,
			method: 'get',
			success(res) {
				data.Business=res.data.data.map(item=>{
					return {
						text:item.name,
						value:item.ID
					}
				})
			}
		})
	}
	function partition (){
		proxy.$SHOPrequest({
			url: `business/partition/?page=1&size=999`,
			method: 'get',
			success(res) {
				data.partition=res.data.data.map(item=>{
					return {
						text:item.name,
						value:item.ID
					}
				})
			}
		})
	}
	function firstClass (){
		proxy.$SHOPrequest({
			url: `business/firstClass/?page=1&size=999`,
			method: 'get',
			success(res) {
				data.firstlist=res.data.data.map(item=>{
					return {
						text:item.name,
						value:item.ID
					}
				})
			}
		})
	}

	function UplodeVideo(e){//上传视频
		console.log(e)
		data.form.video=e
	}
	function Uplodeimg(e){//上传图片
		console.log(e)
		data.form.img=e
	}
	function Uplodematerial(e){//上传资质
		console.log(e)
		data.form.material=e
	}

	function imglistupload(){//上传轮播图
		if(data.form.img_list.length<9){
			proxy.$Uplode(function (e){
				console.log(e)
				data.form.img_list.push(e)

			})
		}else{
			uni.showToast({
				icon:'none',
				title:'最多选择9张图片'
			})
		}

	}
	function imglistdelete(index){//删除轮播图
		data.form.img_list.splice(index, 1)
	}
	function firstchange(e){//一级分类选择，获取二级
		data.form.class_second_id=''
		data.form.class_third_id=''
		proxy.$SHOPrequest({
			url: `business/secondClass/?page=1&size=999&class_first_id=${e.detail.value[0].value}`,
			method: 'get',
			success(res) {
				data.secondlist=res.data.data.map(item=>{
					return {
						text:item.name,
						value:item.ID
					}
				})
			}
		})
	}
	function secondchange(e){//二级分类选择，获取三级
		data.form.class_third_id=''
		proxy.$SHOPrequest({
			url: `business/thirdClass/?page=1&size=999&class_second_id=${e.detail.value[0].value}`,
			method: 'get',
			success(res) {
				data.thirdlist=res.data.data.map(item=>{
					return {
						text:item.name,
						value:item.ID
					}
				})
			}
		})
	}
	function submit(state){//添加商品
		if(!data.form.name){
			uni.showToast({
				icon:'none',
				title:'请上传商品名称'
			})
			return false
		}

		if(!data.form.partition_id){
			uni.showToast({
				icon:'none',
				title:'请选择商品分区'
			})
			return false
		}
		if(!data.form.class_first_id){
			uni.showToast({
				icon:'none',
				title:'请选择一级分类'
			})
			return false
		}
		if(!data.form.business_class_id){
			uni.showToast({
				icon:'none',
				title:'请选择商家商品分类'
			})
			return false
		}
		if(!data.form.img){
			uni.showToast({
				icon:'none',
				title:'请上传商品图片'
			})
			return false
		}
		if(data.form.img_list.length==0){
			uni.showToast({
				icon:'none',
				title:'请上传商品轮播图'
			})
			return false
		}

		if(Number(data.form.price)<0){
			uni.showToast({
				icon:'none',
				title:'请输入商品价格'
			})
			return false
		}
	if(Number(data.form.price)<=0){
			uni.showToast({
				icon:'none',
				title:'请输入商品价格'
			})
			return false
		}
	// if(Number(data.form.pv)<=0){
	// 		uni.showToast({
	// 			icon:'none',
	// 			title:'请输入PV值'
	// 		})
	// 		return false
	// 	}
	// if(Number(data.form.supply)<=0){
	// 		uni.showToast({
	// 			icon:'none',
	// 			title:'请输入商品供货价'
  //     })
  //   return false
  // }
		if(Number(data.form.discount)<1||Number(data.form.discount)>95){
			uni.showToast({
				icon:'none',
				title:'商品折扣范围1-95'
			})
			return false
		}

		if(!data.form.title){
			uni.showToast({
				icon:'none',
				title:'请上传商品描述'
			})
			return false
		}
		if(data.attribute_list.length==0){
			uni.showToast({
				icon:'none',
				title:'请选择商品规格'
			})
			return false
		}
		if(!data.form.details){
			uni.showToast({
				icon:'none',
				title:'请上传商品详情'
			})
			return false
		}
		let submitdata = JSON.parse(JSON.stringify(data.form))
		submitdata.class_second_id=submitdata.class_second_id?submitdata.class_second_id:0
		submitdata.class_third_id=submitdata.class_third_id?submitdata.class_third_id:0
		submitdata.attribute_list=uni.getStorageSync('attributelist')
		submitdata.img_list=JSON.stringify(JSON.parse(JSON.stringify(data.form.img_list)))
		submitdata.price=Number(submitdata.price)
		submitdata.stock=Number(submitdata.stock)
		submitdata.discount=Number(submitdata.discount)
		submitdata.market=Number(submitdata.market)
		submitdata.pv=Number(submitdata.pv)
		submitdata.supply=Number(submitdata.supply)

		submitdata['state']=state
		proxy.$SHOPrequest({
			url: `business/add_goods/`,
			method: data.id==0?'POST':'PUT',
			data:submitdata,
			success(res) {
				uni.showToast({
					icon:'none',
					title:res.errmsg
				})
				if(res.errno==0){
					setTimeout(()=>{
						uni.navigateBack()
					},1000)

				}else{
					data.form.img_list=proxy.$evalPro(submitdata.img_list)
				}

			}
		})
	}
</script>

<style lang="scss" scoped>
	.container{
		padding: 30upx;
		.content{
			.box{
				padding: 30upx;
				border-radius: 20upx;
				background-color: #fff;
				margin-bottom: 30upx;
				.h4{
					font-size: 36upx;
					font-weight: bold;
				}
				.title{
					display: flex;
					font-size: 28upx;
					font-weight: bold;
					margin-top: 20upx;
					text{
						color: $color1;
						font-size: 36upx;
					}
				}
				.ms{
					color: #5373FF;
					text-align: right;
					font-size: 20upx;
					padding: 20upx;
				}
				.uplode{
					display: flex;
					align-items: center;
					image{
						width: 160upx;
						height: 160upx;
					}
          .video_cnt{
            position: relative;
            .close{
              position: absolute;
              top: -25upx;
              right: -25upx;
              z-index: 5;
            }
          }
					video{
						width: 260upx;
						height: 160upx;
					}
					.video{
						width: 260upx;
						height: 160upx;
					}
					.btn{
						height: 40upx;
						margin-left: 20upx;
						line-height: 40upx;
						background-color: #FFF4F7;
						padding: 5upx 10upx;
						font-size: 24upx;
						font-weight: bold;
						border: 1upx solid $color1;
						border-radius: 10upx;
						color: $color1;
					}
				}
				.uplodes{
					display: flex;
					flex-wrap: wrap;
					.item{
						margin: 20upx;
						width: 160upx;
						height: 160upx;
						position: relative;
						image{
							width: 160upx;
							height: 160upx;
						}
						.delete{
							width: 40upx;
							height: 40upx;
							position: absolute;
							top: -20upx;
							right: -20upx;
							background-image: url('https://img.fubaozx.cn/static/oldImg/16994999197082.png');
							background-repeat: no-repeat;
							background-size: 100%;
						}
					}

				}
				.selectbox{
					display: flex;
				}
			}
		}
		.footers{
			height: 120upx;
		}
		.footer{
			width: calc(100% - 40upx);
			background-color: #fff;
			padding:20upx;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			text-align: center;
			align-items: center;
			justify-content: space-between;
			.left{
				width: 20%;
				color: $color1;
			}
			.right{
				width: 70%;
				background-color: $color1;
				color: #fff;
				padding: 20upx;
				border-radius: 40upx;
			}
		}
	}
	.xz{
		text-align: right;
		font-size: 28upx;
	}
</style>
